<!DOCTYPE html>
<html lang="zh-cmn-Hans-CN">
<head>
    <title><%= htmlWebpackPlugin.options.title %></title>
    <%= require('../partials/head.ejs')() %>
</head>

<body>
<!-- S:header -->
<header class="header">
    <span class="ico-line"></span>
    <h1 class="hd-tit"><%= htmlWebpackPlugin.options.title %></h1>
</header>
<!-- E:header -->

<!-- S:container -->
<div class="container market-index">
    <!-- market -->
    <div class="market light-bg">
        <!-- tab -->
        <div class="tab">
            <a href="javascript:;" class="active">活期</a>
            <a href="javascript:;">定期</a>
            <a href="javascript:;">基金</a>
            <a href="javascript:;">保险</a>
        </div>
        <!-- tab content -->
        <div class="tab-content">
            <!-- profit percent -->
            <div class="profit-percent red-box">
                <h3 class="pro-name">活期宝12345678</h3>
                <div class="gauge">
                    <span class="date">2016-03-03</span>
                    <h2 class="return-percent">88.8%</h2>
                    <p>7日年化回报率</p>
                    <span class="gain">0.999</span>
                    <p>万份收益</p>
                </div>
                <a href="fund-purchase.html" class="btn-org">立即认购</a>
            </div>
            <!-- sub-tab -->
            <div class="sub-tab">
                <ul class="col2">
                    <li class="active">
                        <p class="grey">七日年化</p>
                        <p><strong class="red return-percent">88.8%</strong></p>
                    </li>
                    <li>
                        <p class="grey">万份收益</p>
                        <p><strong class="red return-profit">1.8888</strong></p>
                    </li>
                </ul>
            </div>
            <!-- sub-tab-cont -->
            <div class="sub-tab-cont">
                <div id="profitChart"></div>
            </div>
            <!-- sub-tab-cont -->
            <div class="sub-tab-cont hide">
                <div class="sub-chart">
                    <img src="../../images/chart@2x.png" alt="">
                </div>
            </div>
        </div>
        <!-- tab content -->
        <div class="tab-content hide">
            <!-- short term -->
            <div class="short-term box">
                <!-- boxtit -->
                <div class="box-tit clearfix">
                    <h2 class="fl">短期</h2>
                    <a href="../market/market-list.html" class="red fr">查看更多</a>
                </div>
                <!-- section list -->
                <div class="section">
                    <ul class="sec-list">
                        <li>
                            <a href="#">
                                <div class="sec-hd clearfix">
                                    <span class="min-amount grey fr">起投金额：<strong
                                                class="min-num dark">1000元</strong></span>
                                    <span class="org-tag fl">精选</span>
                                    <h2 class="fund-name">3个月xxx宝</h2>
                                </div>
                                <div class="sec-bd clearfix">
                                    <div class="annual">
                                        <strong class="red return-percent">88.8%</strong>
                                        <h4 class="grey">年化收益率</h4>
                                    </div>
                                    <div class="duration">
                                        <strong class="dark"><span class="ft27">90</span>天</strong>
                                        <h4 class="grey">理财期限</h4>
                                    </div>
                                    <div class="amount">
                                        <strong class="dark"><span class="ft27">91.59</span>万</strong>
                                        <h4 class="grey">剩余金额</h4>
                                    </div>

                                </div>
                                <div class="sec-ft">
                                    <span class="progress-bar"><span class="progress-current" style="width: 20%"></span></span>
                                </div>
                            </a>
                        </li>
                        <li class="sold-out">
                            <a href="#">
                                <div class="sec-hd clearfix">
                                    <span class="min-amount grey fr">起投金额：<strong
                                                class="min-num dark">1000元</strong></span>
                                    <span class="org-tag fl">精选</span>
                                    <h2 class="fund-name">3个月xxx宝</h2>
                                </div>
                                <div class="sec-bd clearfix">
                                    <div class="annual">
                                        <strong class="red return-percent">88.8%</strong>
                                        <h4 class="grey">年化收益率</h4>
                                    </div>
                                    <div class="duration">
                                        <strong class="dark"><span class="ft27">90</span>天</strong>
                                        <h4 class="grey">理财期限</h4>
                                    </div>
                                    <div class="amount">
                                        <strong class="dark"><span class="ft27">91.59</span>万</strong>
                                        <h4 class="grey">剩余金额</h4>
                                    </div>

                                </div>
                                <div class="sec-ft">
                                    <span class="progress-bar"><span class="progress-current"
                                                                     style="width: 100%"></span></span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            <!-- long term -->
            <div class="long-term box">
                <!-- boxtit -->
                <div class="box-tit clearfix">
                    <h2 class="fl">长期</h2>
                    <a href="../market/market-list.html" class="red fr">查看更多</a>
                </div>
                <!-- section list -->
                <div class="section">
                    <ul class="sec-list">
                        <li>
                            <a href="#">
                                <div class="sec-hd clearfix">
                                    <span class="min-amount grey fr">起投金额：<strong
                                                class="min-num dark">1000元</strong></span>
                                    <span class="org-tag fl">精选</span>
                                    <h2 class="fund-name">9个月定期宝</h2>
                                </div>
                                <div class="sec-bd clearfix">
                                    <div class="annual">
                                        <strong class="red return-percent">88.8%</strong>
                                        <h4 class="grey">年化收益率</h4>
                                    </div>
                                    <div class="duration">
                                        <strong class="dark"><span class="ft27">270</span>天</strong>
                                        <h4 class="grey">理财期限</h4>
                                    </div>
                                    <div class="amount">
                                        <strong class="dark"><span class="ft27">91.59</span>万</strong>
                                        <h4 class="grey">剩余金额</h4>
                                    </div>

                                </div>
                                <div class="sec-ft">
                                    <span class="progress-bar"><span class="progress-current" style="width: 20%"></span></span>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="sec-hd clearfix">
                                    <span class="min-amount grey fr">起投金额：<strong
                                                class="min-num dark">1000元</strong></span>
                                    <span class="org-tag fl">精选</span>
                                    <h2 class="fund-name">9个月定期宝</h2>
                                </div>
                                <div class="sec-bd clearfix">
                                    <div class="annual">
                                        <strong class="red return-percent">88.8%</strong>
                                        <h4 class="grey">年化收益率</h4>
                                    </div>
                                    <div class="duration">
                                        <strong class="dark"><span class="ft27">270</span>天</strong>
                                        <h4 class="grey">理财期限</h4>
                                    </div>
                                    <div class="amount">
                                        <strong class="dark"><span class="ft27">91.59</span>万</strong>
                                        <h4 class="grey">剩余金额</h4>
                                    </div>

                                </div>
                                <div class="sec-ft">
                                    <span class="progress-bar"><span class="progress-current" style="width: 50%"></span></span>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- tab content -->
        <div class="tab-content hide">
            <!-- fund-list -->
            <div class="fund-list">
                <ul class="bg-list">
                    <li>
                        <a href="market-list.html" class="arrow-right">
                            货币基金
                        </a>
                    </li>
                    <li>
                        <a href="market-list.html" class="arrow-right">
                            股票型
                        </a>
                    </li>
                    <li>
                        <a href="market-list.html" class="arrow-right">
                            混合型
                        </a>
                    </li>
                    <li>
                        <a href="market-list.html" class="arrow-right">
                            债券型
                        </a>
                    </li>
                    <li>
                        <a href="market-list.html" class="arrow-right">
                            指数型
                        </a>
                    </li>
                </ul>
            </div>
        </div>
        <!-- tab content -->
        <div class="tab-content hide">
            <!-- sold-section -->
            <div class="sold-section">
                <div class="sold-box">
                    <h3>抱歉，已全部售罄！</h3>
                    <p>您可关注下一轮购买</p>
                </div>
                <p>
                    <a href="../selection/selection.html" class="btn-primary">返回首页</a>
                </p>
            </div>
        </div>
    </div>
</div>

<!-- E:container -->
<%= require('../partials/footer.ejs')({active: 'market'}) %>
<script>
    seajs.use([
        "highcharts"
    ], function (service) {
        $(function(){
            $('#profitChart').highcharts({
                colors:['#95c108'],
                chart: {
                    spacingRight: 20,
                    marginTop: 35,
                    type: 'column',
                    height: $.remPx(6.25)
                },
                title: {
                    text: ''
                },
                subtitle: {
                    text: document.ontouchstart === undefined ?
                            '' : ''
                },
                yAxis: {
                    title: {
                        align: 'high',
                        offset: 0,
                        text: '',
                        rotation: 0,
                        y: -10
                    },
                    tickInterval: 0.1
                },
                xAxis: {
                    labels: {
                        rotation: 0,
                        distance: 0,
                        overflow:"justify"
                    },
                    tickInterval: 1,
                    tickmarkPlacement: 'on',
                    min: 0,
                    categories: ['01',
                        '02',
                        '03',
                        '04',
                        '05',
                        '06',
                        '07',
                        '08',
                        '09',
                        '10',
                        '11',
                        '12',
                        '13',
                        '14',
                        '15',
                        '16',
                        '17',
                        '18',
                        '19',
                        '20',
                        '21',
                        '22',
                        '23',
                        '24',
                        '25',
                        '26',
                        '27',
                        '28',
                        '29',
                        '30',
                        '31',
                    ]
                },
                tooltip: {
                    animation: false,
                    shadow: false,
                    followPointer: false,
                    followTouchMove: false,
                    shared: true,
                    formatter: function () {
                        return '07-'+this.x+this.y;
                    },
                },
                legend: {
                    enabled: false
                },
                exporting: {
                    enabled: false
                },
                credits: {
                    enabled: false
                },
                plotOptions: {
                    column: {
                        pointPadding: 0.2,
                        borderWidth: 0,
                        borderRadius:3
                    }
                },

                series: [{
                    data: [
                        0.1,
                        0.2,
                        0.3,
                        0.4,
                        0.5,
                        0.6,
                        0.7,
                        0.8,
                        0.9,
                        1.0,
                        1.1,
                        1.2,
                        1.3,
                        1.4,
                        1.5,
                        1.6,
                        1.7,
                        1.8,
                        1.9,
                        2.0,
                        2.1,
                        2.2,
                        2.3,
                        2.4,
                        2.5,
                        2.6,
                        2.7,
                        2.8,
                        2.9,
                        3.0,
                        3.1,
                    ],
                    showInLegend: false
                }],
            });
        });

    });


</script>
</body>
</html>
